<template>
	<view class="all">
		<image class="ima" :src="getHeadUrl(edetail.photo_path)"></image>
		<view class="table">
			<view class="tit">| 活动名称</view>
			<view class="tab">
				<image src="/static/images/trumpet.png" style="width: 40rpx; height: 40rpx;"></image>
				<view class="pla">{{edetail.name}}</view>
			</view>
			<view class="tab">
				<image src="../../static/images/time.png" style="width: 40rpx; height: 40rpx;"></image>
				<view class="time">活动时间: {{toDate(edetail.start_time)}} 至 {{toDate(edetail.end_time)}} </view>
			</view>
			<view class="tab">
				<image src="../../static/images/address.png" style="width: 40rpx; height: 40rpx;"></image>
				<view v-if="edetail.place == null">
					<view class="pla">贵州民族大学新校区学生活动中心</view>
				</view>
				<view v-else>
					<view class="pla">{{edetail.place}}</view>
				</view>

			</view>
			<view class="tab">
				<image src="../../static/images/person.png" style="width: 40rpx; height: 40rpx;"></image>
				<view class="pla">报名数: {{edetail.number}} 人</view>
			</view>
		</view>
		<view class="tab1">
			<view class="tex">| 发起者</view>
			<view class="tab2">
				<image :src="srcUrl3()" style="width: 120rpx; height: 120rpx;"></image>
				<view v-if="edetail.create_by == null">
					<view class="tex1">活动发起者：贵州民族大学</view>
				</view>
				<view v-else>
					<view class="tex1">活动发起者：{{edetail.create_by}}</view>
				</view>

			</view>
		</view>
		<view class="tab3">
			<view class="tex">| 活动详情</view>
			<view v-if="edetail.content == null">
				<view class="tex3">暂无活动详情！！！</view>
			</view>
			<view v-else>
				<view class="tex3">{{edetail.content}}</view>
			</view>

		</view>

		<button v-if="appid==0" class="bon" @click="toJoin(edetail.id)">报名参加</button>
		<button v-else class="bon1">已加成功报名</button>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				edetail: [],
				id: 2,
				size: 10,
				page: 0,
				type: 1, //更据tpye来判断当前页是总通讯页还是查询页 1:总通讯页 2：查询页
				name: '',
				appid: 0
			}
		},
		computed:{
		   ...mapState(['userId', 'token', 'userName', 'wxNickName'])
		},
		onLoad(e) {
			//console.log(e.activitiesId)
			uni.request({
					url: app.globalData.URL + 'activities/byid?activitiesId=' + e.id,
					method: 'GET'
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res] = data;
					console.log(res);
					this.edetail = res.data[0];
					console.log(this.edetail);
				});
			this.queryActUserInfo(e.id);
		},
		methods: {
			queryActUserInfo(id) {
				var that = this;
				let params = {
					url: 'appUserInfo/queryActUserInfo',
					type: 'POST',
					data: {
						id: id,
						userId: that.userId
					},
					sCallback: function(res) {
						console.log("queryActUserInfo", res);
						that.appid = res.id;
					}
				}
				app.request(params);
			},
			toDate: function(time) {
				let date = new Date(time); //获取一个时间对象
				let dateString = date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDate();
				//console.log(dateString)
				return dateString;
			},
			srcUrl3: function() {
				return app.globalData.Link + 'upload/图片/xiaohui.png';
			},
			getHeadUrl(path) {
				if (path == null) {
					return app.globalData.Link + 'file/system/默认.jpg';
				} else {
					return app.globalData.Link + 'file/图片/' + path;
				}
			},
			toJoin(id) {
				let that = this;
				let params = {
					url: 'appUserInfo/addActUserInfo',
					type: 'POST',
					data: {
						activitiesId: id,
						userId: that.userId,
						name: that.userName,
						type: that.wxNickName
					},
					sCallback: function(res) {
						console.log("toJoin", res);
						
						that.appid = res.id;
						if (that.appid > 0){
							uni.showToast({
								title: "报名参加活动成功！",
								icon: 'none',
								duration: 2000
							});
						}
						
						// uni.redirectTo({
						// 	url:'../re_alumni/xyhxq?id=' + id
						// });
					}
				}
				app.request(params);
			}
		}

	}
</script>

<style>
	.nothing {
		text-align: center;
	}

	.all {
		background-color: #F8F8F8;
		height: auto;
	}

	.ima {
		width: 100%;
		height: 400rpx;
	}

	.table {
		height: 448rpx;
		background-color: #FFFFFF;
	}

	.tit {
		margin: 20rpx 20rpx;
		height: 80rpx;
		border-bottom: 1px solid #CCCCCC;
	}

	.tab {
		display: flex;
		margin: 20rpx 20rpx;
		font-size: 28rpx;
		color: #636363;
		height: 70rpx;
		border-bottom: 1px solid #CCCCCC;
	}

	.time {
		margin-left: 8rpx;
	}

	.pla {
		margin-left: 8rpx;
	}

	.tab1 {
		height: 250rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.tex {
		display: flex;
		font-size: 35rpx;
		color: #333333;
		margin: 20rpx 20rpx;
		height: 70rpx;
		align-items: center;
		border-bottom: 1px solid #CCCCCC;
	}

	.tab2 {
		display: flex;
	}

	.tex1 {
		font-size: 35rpx;
		color: #333333;
		margin-top: 50rpx;
		margin-left: 20rpx;
	}

	.tex2 {
		font-size: 28rpx;
		color: #636363;
		margin-top: -70rpx;
		margin-left: 150rpx;
	}

	.tex3 {

		font-size: 28rpx;
		color: #333333;
		margin: 20rpx 20rpx;
		text-indent: 2em;
	}

	.tab3 {
		height: 350rpx;
		background-color: #FFFFFF;
	}

	.bon {
		color: #FFFFFF;
		background-color: #007AFF;
	}
	
	.bon1 {
		color: #FFFFFF;
		background-color: #e1e1e1;
	}
</style>
